import React, { Component } from 'react'
import * as helper from '../../../utilities/helper'

const uncheckedIcon = require("./images/unchecked.png")
const checkedIcon = require("./images/checked.png")

const checkboxStyle = {
    width: '18px',
    height: '18px',
    display: 'inline-block',
    backgroundImage: 'url(' + uncheckedIcon + ')',
    backgroundSize: '18px 18px',
    backgroundPosition: 'left top',
    backgroundRepeat: 'no-repeat'
}

const checkedStyle = {
    backgroundImage: 'url(' + checkedIcon + ')'
}

export default class CheckBox extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.state = {
            checked: true
        }
    }

    handleClick() {
        this.setState({
            checked: !this.state.checked
        })
        this.props.onClick(this.state.checked)
    }

    render() {
        const style = helper.combineStyles(
            (this.state.checked ? Object.assign({}, checkboxStyle, checkedStyle) : checkboxStyle),
            {}, '', this.props.style
        )

        return (
            <span onClick={this.handleClick} style={style}/>
        )
    }
}
